<template>
    <div>
        <div class="admin-top">
            <div class="admin-top-sousou">
                <span>
                    <el-icon>
                        <Search />
                    </el-icon>
                    筛选搜索
                </span>
                <div>
                    <el-button>重置</el-button>
                    <el-button type="primary">查询搜索</el-button>
                </div>
            </div>
            <div class="admin-bom">
                <div>
                    <span>
                        专题名称:
                    </span>
                    <el-input type="text" placeholder="请输入用户名"></el-input>
                </div>
                <div>
                    <span>
                        推荐状态:
                    </span>
                    <el-input type="text" placeholder="请输入用户名"></el-input>
                </div>
            </div>
        </div>
        <div class="admim-nav">
            <div>
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>
                    数据列表
                </span>
            </div>
            <div>
                <el-button type="primary" @click="addadvertise">选择专题</el-button>
            </div>
        </div>
        <div class="admin-foter">
            <el-table :data="tableData" style="width: 100%;" border>
                <el-table-column type="selection" width="60" />
                <el-table-column prop="id" label="编号" width="186" />
                <el-table-column prop="subjectName" label="专题名称" width="186" />
                <el-table-column label="是否推荐" width="186">
                    <template #default="scope">
                        <el-switch :value="scope.row.recommendStatus == 1 ? true : false" />
                    </template>
                </el-table-column>>
                <el-table-column prop="sort" label="排序" width="186">
                </el-table-column>
                <el-table-column prop="orderCount" label="状态" width="186">
                    推荐中
                </el-table-column>
                <el-table-column prop="address" label="操作" width="186">
                    <el-button type="primary" link>编辑</el-button>
                    <el-button type="primary" link>删除</el-button>
                </el-table-column>
            </el-table>
            <div class="footer">
                <div>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            请选择
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-button class="romvoand" type="primary">
                        确定
                    </el-button>
                </div>
                <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
                    :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as api from '../../request/api'
import useTable from '../../hooks/useTables'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
let route = useRouter()
let { tableData, getTableData, pagination } = useTable(api.flash.getSpecial, {})
console.log(tableData);

//分页
getTableData()
const handleSizeChange = (val: number) => {
    getTableData()
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    // console.log(`current page: ${val}`)
}

//添加
const addadvertise = () => {
    // route.push('./addAdvertise')
}
</script>

<style lang="scss" scoped>
.admin-top {
    width: 96%;
    height: 90px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;

    margin-top: 60px;
    margin-bottom: 20px;
    .admin-top-sousou {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            .el-icon {
                padding-right: 10px;
            }
        }

        .el-button {
            margin-left: 20px;
        }

    }

}

.admin-bom {
    padding-left: 50px;
    display: flex;
    justify-content: flex-start;

    div {
        padding-left: 30px;
    }

    .el-input {
        padding-left: 30px;
        width: 200px;
    }
}

.admim-nav {
    width: 96%;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .example-pagination-block {
        margin-top: 10px;
        float: right;
    }

}

.admin-foter {
    margin-top: 20px;
}

.IMG {
    width: 100%;
}

.el-dropdown-link {
    width: 150px;
    border: 2px solid #ccc;
    height: 32px;
    padding-left: 10px;
    border-radius: 5px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon--right {
        padding-right: 10px;
    }

    .el-dropdown-menu {
        width: 150px;
        height: 32px;
    }
}

.romvoand {
    height: 32px;
    margin-left: 20px;
}

.footer {
    display: flex;
    justify-content: space-between;
}
</style>